<template>
  <view>
    <heardData></heardData>
    <view class="content">
	  <view class="submit_btn">
		  <button type="primary" size="mini" @click="submitData">保存</button>
		  <button style="float: right;" type="" @click="goback" size="mini">返回</button>
	  </view>
      <view class="base_info">
        <uni-forms ref="baseForm" :modelValue="dataForm" label-width="150">
			<uni-forms-item label="客户名称" >
				<uni-easyinput v-model="dataForm.khmc" suffixIcon="person" placeholder="请输入客户名称" />
			</uni-forms-item>
			<uni-forms-item label="手机号码">
				<uni-easyinput v-model="dataForm.khsj" suffixIcon="phone" placeholder="请输入手机号码" />
			</uni-forms-item>
			<uni-forms-item label="邮寄地址">
				<uni-easyinput v-model="dataForm.khdz" suffixIcon="location" placeholder="请输入邮寄地址" />
			</uni-forms-item>
			<uni-forms-item label="付款方式">
				<uni-data-select v-model="dataForm.fkfs" placeholder="请选择付款方式" :localdata="fkfsData"></uni-data-select>
			</uni-forms-item>
		</uni-forms>
      </view>
	  <view class="goods">
		  <view class="button-group">
		    <button type="primary" size="mini" @click="addPro1"><uni-icons type="plusempty" color='#fff'
		        size="15"></uni-icons>新增商品</button>
		  </view>
		  <view class="goods-table">
			  <view class="heard">
				  <text>商品名称</text>
				  <text>商品图片</text>
				  <text>购买数量</text>
				  <text>邮寄地址</text>
			  </view>
			  <view v-if="dataForm.lstTbProduct.length !== 0">
				  <uni-swipe-action-item  v-for="(item, index) in dataForm.lstTbProduct">
					  <view class="table-content" :key="index">
						  <view>{{ item.cpmc }}</view>
						  <view><image style="width: 100%; max-height: 150rpx;" :src="item.cptpdz1" mode=""></image></view>
						  <view>{{ item.gmsl }}</view>
						  <view>{{item.yjdz ? item.yjdz : ''}}</view>
					  </view>
					  <template v-slot:right>
					  	<view class="primary-btn" @click="editPro(item, index)"><text>编辑</text></view>
					  	<view class="error-btn" @click="delPro(index)"><text>删除</text></view>
					  </template>
				  </uni-swipe-action-item>
			  </view>
			  <view v-else>
				  <kevy-empty :show="true" type="favor" text="没有数据哦~"></kevy-empty>
			  </view>
		  </view>
	  </view>
	  <uni-drawer ref="showRight" mode="right" :mask-click="true" :width="300">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="pro_btn">
					<button type="primary" size="mini" @click="savePro">确认</button>
					<button style="float: right;" type="" size="mini" @click="$refs.showRight.close()">取消</button>
				</view>
				<view class="pro_info">
					<uni-forms ref="valiForm" :model-value="productItem" >
					<uni-forms-item label="商品名称" label-width="160rpx">
						<lin-select :list="productList" :loading="loading" loading-text="数据加载中"
					    value-key="id" name-key="cpmc" :max-height="180" @confirm="changeproduct"
					    placeholder="请输入商品名称" @input="getProData" v-model="cpmc"/>
			</uni-forms-item>
					<uni-forms-item label="购买数量" label-width="160rpx">
<uni-easyinput v-model="productItem.gmsl" type="number" placeholder="请输入购买数量" />
			</uni-forms-item>
					<uni-forms-item label="邮寄姓名" label-width="160rpx">
<uni-easyinput v-model="productItem.yjmc"  placeholder="请输入邮寄姓名" />
			</uni-forms-item>
					<uni-forms-item label="邮寄号码" label-width="160rpx">
<uni-easyinput v-model="productItem.yjsj"  placeholder="请输入邮寄号码" />
			</uni-forms-item>
					<uni-forms-item label="邮寄地址" label-width="160rpx">
<uni-easyinput v-model="productItem.yjdz"  placeholder="请输入邮寄地址" />
			</uni-forms-item>
					<uni-forms-item label="商品图片" label-width="160rpx">
<image class="pro_image" :src="productItem.cptpdz1" mode=""></image>
			</uni-forms-item>
			 </uni-forms>
				</view>
			</scroll-view>
	   </uni-drawer>
    </view>
  </view>
</template>

<script>
	import heardData from "../../component/heard.vue" //组件引入
    export default {
		components: { heardData },
		data () {
			return {
				dataForm: {
					khmc: '',
					khsj: '',
					khdz: '',
					fkfs: '',
					
					type: '1',
					ddbh: '',
					ddjbr: '',
					lstTbProduct: []
				},
				fkfsData: [],
				cpmc: '', // 商品名称
				loading: false,
				productList: [],
				productItem: {},
				editIndex: null
			}
		},
		onLoad (query) {
			this.getUserOrderInfo(query.parm)
		},
		created () {
			this.getWorkDropdownList()
		},
        methods: {
			addPro1 () {
				this.$refs.showRight.open();
				this.productItem = {}
				this.productList = []
				this.cpmc = ''
				this.editIndex = null
			},
			getWorkDropdownList () {
				this.$request('mobile/getDropdownList', 'post', [{type: '付款方式'}]).then(res => {
					if (res.code == 200) {
						if (res.data.length > 0 && res.data[0].value) {
							res.data[0].value.forEach(item => {
								item.value = item.dictCode
								item.text = item.dictValue
							})
							this.fkfsData = res.data[0].value
						}
					}
				})
			},
			getUserOrderInfo (parm) {
				console.log(parm)
				this.$request('mobile/getUserOrderInfo', 'post', {yhsj: uni.getStorageSync('mobile'), parm: parm}).then(res => {
					if (res.code == 200) {
						this.dataForm.ddbh = res.data.order.ddbh
						this.dataForm.ddjbr = res.data.order.ddjbr
						console.log(this.dataForm)
					}
				})
			},
			getProData (e) {
				if (e) {
					this.loading = true
					this.$request('mobile/getProNmBychannelProInfo', 'post', {yhsj: uni.getStorageSync('mobile'), cpmc: e}).then(res => {
						if (res.code == 200) {
							console.log(res)
							this.productList = res.data.productInfo
							this.loading = false
						}
					})
				}
			},
			submitData () {
				let data = Object.assign({}, {yhsj: uni.getStorageSync('mobile')}, this.dataForm)
				this.$request('mobile/savUserOrderInfo', 'post', data).then(res => {
					if (res.code == 200) {
						if (res.data) {
							// 添加成功
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							})
							 setTimeout(() => {
							 	uni.navigateTo({
							 	    url: '/pages/userorder/index'
							 	});
							 },2000)
						}
					} else {
						uni.showToast({title: res.msg,icon: 'none'});
					}
				})
			},
			changeproduct (e) {
				this.productList.forEach(item => {
					if (item.id == e) {
						this.productItem = item
					}
				})
			},
			savePro () {
				let that = this
				if (!this.cpmc) {
					uni.showToast({title: '请添加商品',icon: 'none'});
					return 
				}
				if (!this.productItem.gmsl) {
					uni.showToast({title: '请输入购买数量',icon: 'none'});
					return 
				}
				uni.showModal({
				    title: '提示',
				    content: `商品名称：${that.productItem.cpmc}\n购买数量：${that.productItem.gmsl}\n邮寄姓名：${that.productItem.yjmc ? that.productItem.yjmc : that.dataForm.khmc }\n邮寄号码：${that.productItem.yjsj ? that.productItem.yjsj : that.dataForm.khsj }\n邮寄地址：${that.productItem.yjdz ? that.productItem.yjdz : that.dataForm.khdz }\n${!that.productItem.yjdz ? '订单地址将作为邮寄地址\n是否确认？' : '请再次确认相关信息？' }`,
				    success: function (res) {
				        if (res.confirm) {
							that.saveProAll()
				        }
				    }
				});
			},
			saveProAll () {
				if (this.editIndex !== null) {
					console.log('修改')
					this.dataForm.lstTbProduct[this.editIndex] = this.productItem
				} else {
					console.log('新增')
					this.dataForm.lstTbProduct.push(this.productItem)
				}
				this.$refs.showRight.close();
			},
			editPro (item, index) {
				this.productItem = item
				this.editIndex = index
				this.cpmc = item.cpmc
				this.$refs.showRight.open();
			},
			delPro (index) {
				this.dataForm.lstTbProduct.splice(index, 1)
			},
			goback () {
				uni.navigateTo({
				    url: '/pages/index/index'
				});
			}
        }
    }
</script>

<style lang="scss">
.content{
	padding-bottom: 10rpx;
}
	.base_info {
		background: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.submit_btn {
		margin: 20rpx;
	}
	.goods {
		margin: 20rpx;
		.table {
		  .uni-table {
		    width: 100% !important;
		    min-width: auto !important;
		    .uni-table-th {
		      width: 20% !important;
		      font-size: 28rpx !important;
		    }
		  }
		}
	}
	.button-group {
		margin: 30rpx 0 20rpx;
		button {
		  width: 100%;
		  text-align: center;
		  background: #01a0fe;
		}
	}
	.goods-table {
		.heard {
			background: #e4ebf6;
		display: flex;
			text {
				 flex: 1;font-weight: 500; font-size: 26rpx;
				text-align: center; color: #909399; border: 1px solid #ebeef5; padding: 20rpx 5rpx;
				&:last-child {
					// border-right: none;
				}
			}
		}
		.table-content {
			background: #fff; display: flex;
			view {
				 font-weight: 500; font-size: 26rpx;  flex: 1;
				color: #909399; border: 1px solid #ebeef5; padding: 20rpx 5rpx; text-align: center;
				justify-content: center;
				    align-items: center;
				&:last-child {
					// border-right: none;
				}
			}
			
		}
	}
	.primary-btn {
		display: inline-flex; width: 100rpx; height: 100%; align-items: center; justify-content: center;
		color: #fff; background-color: #409eff; border-color: #409eff;
	}
	.error-btn {
		display: inline-flex; width: 100rpx; height: 100%; align-items: center; justify-content: center;
		color: #fff; background-color: #f56c6c; border-color: #f56c6c;
	}
	.pro_info {
		padding: 20rpx;
		.uni-forms-item {
			margin: 0;
		}
		.uni-easyinput {
			margin-bottom: 20rpx;
		}
		.pro_image {
			border: 1px solid #ebeef5; width: 100%;
		}
	}
	.pro_btn {
		padding: 20rpx 20rpx 0;
		
	}
	button[type=primary] {
	    background-color: #409eff;
	    color: #fff;
	}
	
</style>